<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗柜协议解析工作台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .glass-morphism {
            background: rgba(23, 25, 35, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .neon-border {
            box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 min-h-screen">
    <!-- 主工作区 -->
    <main class="container mx-auto p-4 space-y-6">
        <!-- 标题区 -->
        <header class="text-center space-y-2">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
                智能医疗柜协议解析台
            </h1>
            <p class="text-gray-400">Version 2.3 Protocol Analyzer</p>
        </header>

        <!-- 指令解析工作区 -->
        <div class="grid grid-cols-1 gap-6">
            <!-- 指令输入区 -->
            <section class="glass-morphism rounded-2xl p-6 neon-border">
                <h2 class="text-xl font-semibold text-blue-400 mb-4">原始指令输入</h2>
                <div class="space-y-4">
                    <textarea 
                        class="w-full h-32 bg-gray-800/40 rounded-lg p-4 text-blue-400 font-mono 
                               focus:ring-2 focus:ring-blue-500 outline-none placeholder-gray-500"
                        placeholder="输入或粘贴指令（示例：F3 00 08 11 11 01 00 00 00 01 08）"
                    ></textarea>
                    <button class="w-full py-3 bg-blue-600/40 hover:bg-blue-700/50 rounded-lg transition-colors">
                        解析指令
                    </button>
                </div>
            </section>

            <!-- 解析结果展示 -->
            <section class="glass-morphism rounded-2xl p-6 neon-border">
                <h2 class="text-xl font-semibold text-purple-400 mb-4">协议解析结果</h2>
                <div class="space-y-6">
                    <!-- 字段解析 -->
                    <div class="bg-gray-800/20 rounded-xl p-4">
                        <h3 class="text-sm text-gray-400 mb-3">字段解析</h3>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <!-- 发送指令解析示例 -->
                            <div class="text-gray-300">包头</div>
                            <div class="font-mono text-blue-400">0xF3</div>
                            
                            <div class="text-gray-300">长度</div>
                            <div class="font-mono">0x0008 <span class="text-gray-400 ml-2">(8 bytes)</span></div>
                            
                            <div class="text-gray-300">命令码</div>
                            <div class="font-mono text-purple-400">0x1111 <span class="text-gray-400 ml-2">(开门操作)</span></div>
                            
                            <div class="text-gray-300">地址编码</div>
                            <div class="font-mono">0x01 <span class="text-gray-400 ml-2">(1号柜)</span></div>
                            
                            <div class="text-gray-300">锁编号</div>
                            <div class="font-mono text-green-400">0x01 <span class="text-gray-400 ml-2">(1号锁)</span></div>
                            
                            <div class="text-gray-300">校验码</div>
                            <div class="font-mono">0x08 <span class="text-gray-400 ml-2">(LRC校验通过)</span></div>
                        </div>
                    </div>

                    <!-- 状态结果 -->
                    <div class="bg-green-900/20 rounded-xl p-4 border border-green-500/30">
                        <div class="flex items-center space-x-3">
                            <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <div>
                                <h3 class="font-medium text-green-400">操作成功</h3>
                                <p class="text-sm text-gray-400 mt-1">1号柜 1号锁已开启</p>
                            </div>
                        </div>
                    </div>

                    <!-- 返回指令解析示例 -->
                    <div class="bg-gray-800/20 rounded-xl p-4">
                        <h3 class="text-sm text-gray-400 mb-3">返回数据解析</h3>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div class="text-gray-300">状态码</div>
                            <div class="font-mono">0x01 <span class="text-green-400 ml-2">(已开启)</span></div>
                            
                            <div class="text-gray-300">数据长度</div>
                            <div class="font-mono">0x0009 <span class="text-gray-400 ml-2">(9 bytes)</span></div>
                            
                            <div class="text-gray-300">校验结果</div>
                            <div class="font-mono text-green-400">0x08 <span class="text-gray-400 ml-2">(LRC校验通过)</span></div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <script>
        // 示例交互功能
        document.querySelectorAll('input, textarea').forEach(el => {
            el.addEventListener('focus', () => el.classList.add('ring-2', 'ring-blue-500/30'))
            el.addEventListener('blur', () => el.classList.remove('ring-2', 'ring-blue-500/30'))
        })
    </script>
</body>
</html>
